<template>
  <div class="table-storied">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd(0,'')">
          添加楼宇
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item prop="buildingName" >
            <el-input v-model="formInline.buildingName" placeholder="楼宇名称"></el-input>
          </el-form-item>
          <el-form-item  prop="institutionNumber">
            <el-select
              v-model="formInline.institutionNumber"


              style="margin-left: 10px;"
              placeholder="机构名称">
              <el-option
                v-for="item in options"
                :key="item.institutionNumber"
                :label="item.institutionName"
                :value="item.institutionNumber">
              </el-option>
            </el-select>
<!--            <el-input v-model.number="formInline.institutionNumber" placeholder="机构编号"></el-input>-->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">条件查询</el-button>
          </el-form-item>
        </el-form>

      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table

      v-loading="listLoading"
      :data="list"
      :default-sort="{prop:'units', order:'ascending'}"
      @sort-change="changeTableSort"
    >

      <el-table-column show-overflow-tooltip label="机构名称" width="200"  prop="institutionName">

      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="楼宇编号"
        prop="number"
        sortable="'custom'"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="楼宇名称"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="楼宇层数"
        sortable="'custom'"
        prop="numberOfLayers"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="楼宇单元"
        sortable="'custom'"
        prop="units"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="备注信息"
        prop="remark"

      ></el-table-column>
      <el-table-column label="禁用状态" prop="disabled">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.disabled"
            class="demo"
            active-color="#F04134"
            active-text="禁用"
           font-size="12px"
            inactive-color="#11CED2"
            inactive-text="启用"
            @change="switchChange(scope.$index, scope.row)"

           />
        </template>




      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="180px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text"  @click="handleAdd(scope.row.id,scope.row)" >修改<i class="el-icon-edit"></i></el-button>
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)" >
            删除<i class="el-icon-delete"></i>
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="500px"
      destroy-on-close
    >

      <el-form ref="form"  :rules="rules"  :model="form"  label-width="80px" >
        <el-form-item label="机构名称" prop="institutionName" v-if="!isdisabled">
           <span :v-if=isdisabled>
             {{form.institutionName}}
          </span>
          <el-select
            v-model="form.institutionNumber"


            style="width: 350px"
            placeholder="机构名称">
            <el-option
              v-for="item in options"
              :key="item.institutionNumber"
              :label="item.institutionName"
              :value="item.institutionNumber">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="楼宇编号"  prop="number" >
          <el-input v-model="form.number"    v-if="!isdisabled" ></el-input>
          <span v-if="isdisabled">
             {{form.number}}
          </span>
        </el-form-item>
        <el-form-item label="楼宇名称" prop="name">
          <el-input v-model="form.name"  ></el-input>
        </el-form-item>
        <el-form-item label="楼宇层数" prop="numberOfLayers" >
          <el-input  v-model="form.numberOfLayers"  type="number" min="1"></el-input>
        </el-form-item>
        <el-form-item label="楼宇单元" prop="units" >
          <el-input  v-model="form.units"  type="number" min="1"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" >
          <el-input  type="textarea" v-model="form.remark" ></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary"  @click="Saveadd('from')">确 定</el-button>
      </div>

    </el-dialog>


  </div>
</template>

<script>

    import { add } from "@/api/storied";
    import { doDelete } from "@/api/storied";
    import { search } from "@/api/storied";
    import { condition  } from "@/api/storied";
    import { disable  } from "@/api/storied";
    import { searchrole  } from "@/api/storied";
    import { enable  } from "@/api/storied";
    export default {
        name: "Storied",


        data() {
            return {
                // value:"",
                // value1:"",
                options: "",
                dialogFormVisible: false,
                imgShow: true,
                methodsType:'put',
                isdisabled:false,
                id:0,
              list:[],
                formInline: {
                    buildingName: '',
                    institutionNumber:"",
                },
                form:{
                    buildingName: '',
                    institutionNumber:"",
                    name:"",
                    number:"",
                    numberOfLayers:"",
                    remark:"",
                    units:"",
                },
                accessToken:"",
                listLoading: true,
                layout: "total, sizes, prev, pager, next, jumper",
                total: 0,
                background: true,
                selectRows: "",
                elementLoadingText: "正在加载...",

                title:"添加楼宇",

                rules:{
                    institutionNumber: [{ trigger: "blur", message: "机构编码"}],
                    name: [{ required: true, trigger: "blur", message: "楼宇名称" ,type:'string'}],
                    number:[{ required: true, trigger: "blur", message: "楼宇编号" ,}],
                    numberOfLayers:[{ required: true, message: "楼宇层数必须是数字", trigger: "blur",}],
                    units:[{ required: true, message: "楼宇单元必须是数字",trigger: "blur",}],
                    remake:[{  trigger: "blur", message: "备注信息" }],

                },
            };
        },
        created(){




            setTimeout(() => {

                this.form.institutionNumber=localStorage.getItem("institutionNumber")
                console.log( this.form.institutionNumber)
                this.options= JSON.parse(localStorage.getItem("childinstitutionNumber"));
              this.formInline.institutionNumber=localStorage.getItem("institutionNumber")
            }, 1000);

            setTimeout(() => {
                this.search()
            }, 1000);



        },

        methods:{

            changeTableSort(column){

                var fieldName = column.prop;
                var sortingType = column.order;

                //按照降序排序
                if(sortingType == "descending"){
                    this.list = this.list.sort((a, b) => b[fieldName] - a[fieldName]);
                }
                //按照升序排序
                else{
                    this.list = this.list.sort((a, b) => a[fieldName] - b[fieldName]);
                }


            },
            handleAdd(id,data) {
                this.dialogFormVisible=true
                this.id = id
                console.log(id)
                if(id>0){

                  this.title="编辑楼宇";
                  this.isdisabled = true
                  this.methodsType = 'put'
                  console.log(data.institutionNumber)

                 let institutionNumber=data.institutionNumber
                  let number=data.number

                  condition({institutionNumber,number}).then(res => {

                    console.log(res.data)
                    this.form={
                      ...res.data[0]
                    }

                    console.log(this.form)

                  })
                }else {

                    this.title = "添加楼宇";
                    this.methodsType = 'post'
                    this.isdisabled = false
                      this.form.remark="",
                    this.form.name=""
                    this.form.number=""
                    this.form.numberOfLayers=""
                    this.form.units=""
                    this.form.institutionNumber=localStorage.getItem("institutionNumber")
                    console.log(this.form)
                  }


            },

            Saveadd(){

                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                      if(this.id>0){

                        const {code} = await add(this.form,this.methodsType);
                        if(code==200){
                          this.$baseMessage("修改成功");
                          this.dialogFormVisible=false
                          this.search();

                        }else {
                          return false
                        }
                      }else{

                          console.log(this.form)
                        const {code} = await add(this.form,this.methodsType);
                        if(code==200){
                          this.$baseMessage("添加成功");
                            this.search();
                            this.dialogFormVisible=false

                        }else {
                          return false
                        }
                      }




                    }
                    else {
                        return false;
                    }
                });
            },

            search(id,data){
                this.id = id
                this.listLoading = true;

                if(this.id==undefined){
                    console.log(localStorage.getItem("institutionNumber"))

                }else {
                    this.form.institutionNumber= this.formInline.institutionNumber
                  this.form.buildingName = this.formInline.buildingName;
                }

                search(this.form).then(res =>{
                    console.log(res.data)
                    this.list=res.data

                    setTimeout(() => {
                        this.listLoading = false;
                    }, 500);


                })

            },
            switchChange(index,row){

                let number  =(row.number)

                let institutionNumber   =(row.institutionNumber )
                console.log(row.disabled)
                if(row.disabled==true){
                    this.listLoading = true;
                    disable({institutionNumber,number}).then(res => {
                        this.$baseMessage("已禁用");
                        console.log(res)




                    })


                }else {
                    enable({institutionNumber,number}).then(res => {
                        this.$baseMessage("已启用");
                        console.log(res)



                    })

                }
                setTimeout(() => {
                    this.listLoading = false;
                }, 500);

            },
            handleDelete(index,row) {
                let number  =(row.number)
                let institutionNumber   =(row.institutionNumber )

                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {code, msg } = await doDelete(({number,institutionNumber}));
                        if(code==200){

                            this.$baseMessage(msg, "success");
                            this.search();
                        }else {

                        }
                    });
                }
            },
            close(){
                this.dialogFormVisible=false

            }
        }
    }
</script>

<style scoped>

  .table-storied >>> .demo .el-switch__label {
    position: absolute !important;
    display: none !important;
    color: #fff !important;
  }
  .table-storied >>>.el-switch__core{
    width: 50px !important;
  }
    /*打开时文字位置设置*/
  .table-storied >>> .demo .el-switch__label--right {
    z-index: 1 !important;

  }
  /*关闭时文字位置设置*/
  .table-storied >>> .demo .el-switch__label--left {
    z-index: 1 !important;
    left: 19px !important;
    margin-right: 0px !important;
  }
  /*显示文字*/
  .table-storied >>> .demo .el-switch__label.is-active {
    display: block !important;

  }
  .table-storied >>> .demo .el-switch__label.is-active span{
    font-size: 12px !important;
  }
  .table-storied >>> .demo.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 50px !important !important;
  }
</style>
